<script setup>
import Title from '@/components/title.vue';
import videoJK from './videoJK.vue';
import bdpng from '@/assets/img/bd.png'
import messageList from './message-list.vue';
import DataOverview from './data-overview.vue'
</script>

<template>
    <div class="page">
        <div class="list-item" v-for="(item, index) in 4" :key="idnex">
            <Title title="4#天棚热泵主机"></Title>
            <div class="detail">
                <div class="top">
                    <div class="left">
                        <div class="image">

                        </div>
                        <div class="text">
                            <div class="title">功能</div>
                            <div class="number">211.8</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="image">

                        </div>
                        <div class="text">
                            <div class="title">电源</div>
                            <div class="number">2674511.8</div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="text-list">
                        <div class="text-item" v-for="(item, index) in 4" :key="index">
                            <div class="text">机组运行工况</div>
                            <div class="tag">启动</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.page {
    margin-top: 50rem;
    display: flex;
    flex-direction: column;
    height: calc(100% - 50rem);
    margin-left: 20rem;
    font-size: 20rem;
    color: #fff;
    width: 100%;

    .list-item {
        margin-bottom: 5rem;
        width: 100%;
        margin-top: 20rem;
        flex: 0 0 25%;
        box-shadow: 0 3rem 14rem 2rem rgba(0, 0, 0, 0.12);

        .detail {
            height: calc(100% - 20rem);
            width: 100%;

            .top {
                display: flex;

                .left {
                    display: flex;
                    margin-right: 20rem;

                    .image {
                        background: url(../../../assets/img/gl.png);
                        background-size: 100% 100%;
                        height: 50rem;
                        width: 50rem;
                        margin-right: 10rem;
                    }

                    .text {
                        .title {
                            font-size: 13rem;
                            color: rgb(74, 152, 255);
                            margin-bottom: 5rem;
                        }

                        .number {}
                    }
                }

                .right {
                    display: flex;

                    .image {
                        background: url(../../../assets/img/dl.png);
                        background-size: 100% 100%;
                        height: 50rem;
                        width: 50rem;
                        margin-right: 10rem;
                    }

                    .text {
                        .title {
                            font-size: 13rem;
                            color: rgb(74, 152, 255);
                            margin-bottom: 5rem;
                        }

                        .number {}
                    }
                }
            }

            .bottom {
                width: 100%;

                .text-list {
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;

                    .text-item {
                        display: flex;
                        align-items: center;
                        margin-top: 15rem;
                        flex: 0 0 50%;

                        .text {
                            font-size: 16rem;
                            color: #fff;
                            margin-right: 10rem;
                        }

                        .tag {
                            font-size: 13rem;
                            color: #fff;
                            padding: 3rem;
                            background: rgb(2, 175, 161);
                        }
                    }
                }

            }
        }
    }

}
</style>
